import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import React from 'react';
import {ProFormText, LoginForm} from '@ant-design/pro-form';
import {useIntl, FormattedMessage, SelectLang, history} from 'umi';
import Footer from '@/components/Footer';
import {login, menus} from '@/services/abis/account'

import styles from './index.less';
import {useModel} from "@@/plugin-model/useModel";

const Login: React.FC = () => {
  const intl = useIntl();
  const {setInitialState} = useModel('@@initialState', cxt => ({
    setInitialState: cxt.setInitialState
  }))

  const submit = async (values: Record<string, any>) => {
    const result = await login(values.account, values.password);
    localStorage.setItem("token", result.data!)
    const {data: menu} = await menus()
    await setInitialState((s) => ({
      ...s,
      token: result.data!,
      menu: menu
    }))
    history.push('/')
  }

  return (
    <div className={styles.container}>
      <div className={styles.lang} data-lang>
        {SelectLang && <SelectLang/>}
      </div>
      <div className={styles.content}>
        <LoginForm
          logo={<img alt="logo" src="/logo.svg"/>}
          title="Ant Design"
          subTitle={intl.formatMessage({id: 'pages.layouts.userLayout.title'})}
          initialValues={{
            autoLogin: true,
          }}
          onFinish={async (values) => {
            await submit(values)
          }}
        >
          <>
            <ProFormText
              // name="username"
              name="account"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon}/>,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.username.placeholder',
                defaultMessage: '用户名: admin or user',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.username.required"
                      defaultMessage="请输入用户名!"
                    />
                  ),
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon}/>,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.password.placeholder',
                defaultMessage: '密码: ant.design',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.password.required"
                      defaultMessage="请输入密码！"
                    />
                  ),
                },
              ]}
            />
          </>

          {/*<div*/}
          {/*  style={{*/}
          {/*    marginBottom: 24,*/}
          {/*  }}*/}
          {/*>*/}
          {/*  <ProFormCheckbox noStyle name="autoLogin">*/}
          {/*    <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />*/}
          {/*  </ProFormCheckbox>*/}
          {/*  <a*/}
          {/*    style={{*/}
          {/*      float: 'right',*/}
          {/*    }}*/}
          {/*  >*/}
          {/*    <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />*/}
          {/*  </a>*/}
          {/*</div>*/}
        </LoginForm>
      </div>
      <Footer/>
    </div>
  );
};

export default Login;
